<template>
  <div>
    <template>
      <div>
        <!-- 导航栏 -->
        <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" />

        <!-- 头像上传区域 -->
        <div class="avatar-box">
          <van-image round :src="userInfo.photo" />
          <van-uploader :after-read="afterRead" />
        </div>

        <!-- cell区域 -->
        <van-cell-group>
          <van-cell @click="clickname" title="名称" :value="userInfo.name" is-link />
          <van-cell @click="clicksex" title="性别" :value="userInfo.gender ? '女' : '男'" is-link />
          <van-cell @click="clickBirth" title="生日" :value="userInfo.birthday" is-link />
        </van-cell-group>
        <!-- 裁剪盒子 -->
        <div v-show="cropshow" class="crop-box">
          <vueCropper ref="cropper" :img="cropImg" autoCrop autoCropWidth="200" autoCropHeight="200"></vueCropper>
          <van-button @click="cropup" style="left:0;" type="primary" size="small">裁剪</van-button>
          <van-button @click="cropshow = false" style="right:0;" type="primary" size="small">取消</van-button>
        </div>
        <!-- 修改个人资料 -->
        <div>
          <van-dialog @confirm="changeName" v-model="nameDialogshow" title="修改昵称" show-cancel-button>
            <van-field ref="inp" style="border: 1px solid #ddd;" v-model="editName" />
          </van-dialog>
          <!-- 性别 -->
          <van-popup v-model="sexShow" position="bottom" :style="{ height: '30%' }"><van-picker  title="性别" show-toolbar
              :columns="columns" @confirm="onConfirm" @cancel="sexShow = false"   item-height="20" /></van-popup>

          <!-- 生日 -->
          <van-popup v-model="birthShow" position="bottom" :style="{ height: '30%' }">
            <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate"
              @confirm="changeBirth" @cancel="birthShow = false" /></van-popup>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
import { mapState } from 'vuex'
import { avatarAPI, editUserInfoAPI } from '@/api/user'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      cropshow: false,
      cropImg: '',
      editName: '',
      nameDialogshow: false,
      birthShow: false,
      minDate: new Date(1949 - 10 - 1),
      maxDate: new Date(),
      currentDate: new Date(2021 - 0 - 17),
      sexShow: false,
      columns: ['男', '女'],
      index: '1'

    }
  },
  components: {
    VueCropper
  },
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器

      this.cropshow = true
      this.cropImg = file.content
    },
    cropup () {
      this.$refs.cropper.getCropBlob(async data => {
        const fd = new FormData()
        fd.append('photo', data)
        const res = await avatarAPI(fd)
        this.cropshow = false
        this.$store.commit('user/setUserInfo', {
          ...this.userInfo,
          photo: res.data.photo
        })
      })
    },
    async clickname () {
      this.nameDialogshow = true
      this.editName = this.userInfo.name
      await this.$nextTick()
      this.$refs.inp.focus()
    },
    async changeName () {
      if (this.editName === '') return this.$toast('请输入昵称')
      const res = await editUserInfoAPI({
        name: this.editName
      })
      this.$store.commit('user/setUserInfo', {
        ...this.userInfo,
        name: this.editName
      })
    },
    clickBirth () {
      this.birthShow = true
      this.currentDate = new Date(this.userInfo.birthday)
    },
    async changeBirth () {
      this.birthShow = false
      const birthday = dayjs(this.currentDate).format('YYYY-MM-DD')
      await editUserInfoAPI({ birthday })

      this.$store.commit('user/setUserInfo', {
        ...this.userInfo,
        birthday

      })
    },
    clicksex () {
      this.sexShow = true
    },
    async onConfirm (value, index) {
      this.sexShow = false
      this.index = index
      const gender = this.index
      await editUserInfoAPI({ gender })
      this.$store.commit('user/setUserInfo', {
        ...this.userInfo,
        gender

      })
    }

  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  created () {
    this.$store.dispatch('user/reqUserInfo')
  }
}
</script>

<style lang="less" scoped>
.avatar-box {
  position: relative;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;

  .van-image {
    width: 120px;
    height: 120px;
  }

  .van-uploader {
    position: static;

    ::v-deep .van-uploader__upload {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }
  }
}

.crop-box {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #f00;
  left: 0;
  top: 0;

  .van-button {
    position: fixed;
    bottom: 0;
  }
}
</style>
